<template>
  <!-- 整个页面 -->
  <VanConfigProvider :theme-vars="themeVars">
    <div class="cateList">
      <div class="top">
          <search class="search"></search>
        <!-- <van-cell-group inset class="search"> -->
          <!-- <van-field v-model="value" clearable left-icon="search" placeholder="搜索商品, 共145674款好物" /> -->
          <!-- <van-search v-model="value" placeholder="搜索商品, 共147273款好物" input-align="center" shape="round" /> -->
        <!-- </van-cell-group> -->
      </div>
      <!-- 下面的内容区 -->
      <div class="bottom_cantainer" :data="navBar">
        <!-- 左边导航tabBar -->
       <div class="text">
        <VanSidebar v-model="active" class="tabBar">
          <VanSidebarItem v-for="val in navBar" :key="val.id" :title="val.name" @click="getImgList(val.id)" />
        </VanSidebar>
       </div>

        <!-- 右边的container -->
        <div class="right_contain">
          <!-- banner图 -->
          <div class="text"></div>
          <img
            :src="navBar[active]?.bannerUrl || 'https://yanxuan.nosdn.127.net/static-union/1679558973e8f3ba.jpg?quality=75&type=webp&imageView&thumbnail=0x196'">
          <!-- 商品类名 -->
          <div class="category" v-for="text in category" :key="text.id">
            <span>{{ text.name }}</span>
            <hr>
            <div class="list">
              <div class="img_text" v-for="img in text.categoryList" :key="img.id" @click="handleclick" >
                <img :src="img.wapBannerUrl!" alt="">
                <text>{{ img.name }}</text>
              </div>

            </div>
          </div>

        </div>
      </div>

    </div>


  </VanConfigProvider>
</template>

<script setup lang='ts'>
import { ref, reactive } from 'vue';
import classifyApi, { type TabbarDataModel, dataList, categoryL1List } from '@/api/classify';
import { showSuccessToast, showFailToast } from 'vant';
import { onMounted } from 'vue';
import wyrequest from '@/utils/wyrequest';
import search from '@/components/search/search.vue'
//引入使用vue-router
import { useRouter } from 'vue-router';
const router=useRouter()

const themeVars = reactive({
  sidebarSelectedBorderColor: '#ab2b2b',
  sidebarSelectedBorderHeight: '0.7rem',
  sidebarSelectedTextColor: '#ab2b2b',
  searchContentBackground:'#ededed',
});
const value = ref('');
const active = ref(0);

//获取tabBar数据
const navBar = ref<categoryL1List[]>([])
const getNavBar = async () => {
  try {
    let result = await classifyApi.getTabbarData()
    // let res= await wyrequest.get(`/xhr/search/init.json`)//直接在页面发请求的做法
    // console.log(result)
    navBar.value = result.categoryL1List
    // console.log(navBar.value[1])
    // console.log(navBar.value[1].bannerUrl)

  } catch (error) {
    showFailToast('获取导航数据失败');
    console.log(error)
  }
}

// 获取右边内容区图片列表的数据
// const imgList = ref<any>()
// const categoryText = ref<any>()
const category=ref<any>()
const getImgList = async (categoryId: number) => {
  try {
    let result = await classifyApi.getRightList(categoryId)
    // console.log(result)
    category.value=result.categoryGroupList
    // console.log(category.value);
    

    // imgList.value = result.categoryList
    // categoryText.value = result.categoryGroupList
    // console.log(imgList.value)
    // console.log(categoryText.value)
  } catch (error) {
    showFailToast('获取图片列表数据失败');
    console.log(error)
  }
}

//点击list跳转详情页
const handleclick=()=>{
router.push({
  path:'/worth_buy',
})
}



onMounted(() => {
  getNavBar()
  getImgList(11)
})

</script>

<style lang="less" scoped>

.cateList {
  margin-top: 10px;
  // border: 1px solid #ccc;

  .top {
    width: 100%;
    height: 50px;
    position: fixed;
      top:0px;
      left: 0px;
    border-bottom: 1px solid #ccc;
    background-color: #fff;

    .search {
      // border-bottom: 1px solid #ccc;
      margin:12px 20px ;
    }
    // .search{
    //   position: fixed;
    //   top:0px;
    //   left: 0px;
    // }
  }

  .bottom_cantainer {
    display: flex;
    margin-top: 10px;
    // border-top: 1px solid #ccc;
    // position: relative;

    .text{
      width:80px ;


      .tabBar {
      font-weight: lighter;
      flex-shrink: 0;
      border-right: 1px solid #ccc;
      position: fixed;
      top:52px;
      left: 0;


      van-sidebar-item {
        width: 80px;
        height: 25px;
        border-right: 1px solid #ccc;
      }

    }
    }

    .right_contain {
      width: 294px;
     padding: 56px 20px 15px;
      
      img {
        width: 264px;
        height: 96px;
      }

      .category {
        font-size: 12px;
        // border-bottom: 1px solid #ccc;
      }

      .list {
        display: flex;
        // 允许换行
        flex-wrap: wrap;
        justify-content: space-between;

        .img_text {
          display: flex;
          flex-direction: column;
          margin-top: 10px;
          justify-content: space-evenly;
        }

        img {
          width: 72px;
          height: 72px;
          // margin: 0 10px;
        }

        text {
          width: 72px;
          height: 36px;
          font-size: 12px;
          text-align: center;
        }
      }

      .list::after {
        width: 72px;
        content: "";
      }
    }
  }





}</style>